<!DOCTYPE html>
<html>
  <head>
    <title>选择题</title>
    <style>
      body {
        padding: 0 100px;
      }
      div {
        margin-bottom: 30px;
      }
      li {
        list-style: none;
      }
      .choice label {
        margin-right: 40px;
      }
    </style>
  </head>
  <body>
    <h1>选择题</h1>
    <main id="main">
      <ul class="question">
        <!-- <li>
          <h4>001.在下列哪个选项中,typeof 返回的值为 "object"?</h4>
          <div class="choice">
            <label><input type="radio" />A.null</label>
            <label><input type="radio" />B.null</label>
            <label><input type="radio" />C.null</label>
            <label><input type="radio" />D.null</label>
          </div>
        </li> -->
      </ul>
    </main>

    <button onclick="submitAnswers()">提交答案</button>

    <p id="score"></p>

    <script>
      const list = [
        {
          id: '001',
          title: '在下列哪个选项中，typeof 返回的值为 "object"？',
          options: [
            { op: 'A', value: 'null' },
            { op: 'B', value: 'undefined' },
            { op: 'C', value: 'function' },
            { op: 'D', value: 'string' },
          ],
        },
        {
          id: '002',
          title: '下列哪个方法可以用于删除一个对象的属性？',
          options: [
            { op: 'A', value: 'object.remove(property)' },
            { op: 'B', value: 'object.delete(property)' },
            { op: 'C', value: 'delete object.property' },
            { op: 'D', value: 'object.pop(property)' },
          ],
        },
        {
          id: '003',
          title: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
          options: [
            { op: 'A', value: 'array.add(newElement)' },
            { op: 'B', value: 'array.insert(newElement)' },
            { op: 'C', value: 'array.push(newElement)' },
            { op: 'D', value: 'array.unshift(newElement)' },
          ],
        },
      ]
      const answer = {
        '001': 'A',
        '002': 'C',
        '003': 'C',
      }


      const question = document.querySelector('.question')
        question.innerHTML = list
          .map((item) => {
            const { id, title, options } = item
            return `<li>
          <h4>${id}.${title}</h4>
          <div class="choice">
            ${options
              .map((item) => {
                return `<label><input type="radio" name="${id}" value = "${item.op}">${item.op}. ${item.value}</label>`
              })
              .join('')}
          </div>
        </li>
        `
          })
          .join('')
          
      function submitAnswers() {
        let score = 0
        const input = document.querySelectorAll('input[type="radio"]:checked')
        input.forEach(item=>{
          if(answer[item.name] === item.value){
            score++
          }
        })
        return document.querySelector('#score').textContent = `您的得分是${score*10}分,共30分`
      }
      submitAnswers()
    </script>
  </body>
</html>
